<template>
	<view class="my-container">
		<!-- 顶部区域 -->
		<view class="header">
			<text class="title">我的</text>
			<view class="message-icon">
				<text class="iconfont">📨</text>
				<view class="badge" v-if="hasNewMessage">1</view>
			</view>
		</view>
		
		<!-- 用户信息区域 -->
		<view class="user-info">
			<image class="avatar" src="/static/my.png" mode="aspectFill"></image>
			<view class="user-detail">
				<text class="username">带我去彩虹海</text>
				<view class="user-tag">
					<text class="tag-text">学生认证</text>
					<text class="iconfont verify-icon">✓</text>
				</view>
				<text class="user-motto">软件工程基础课程设计防伪认证：）</text>
			</view>
		</view>
		
		<!-- 功能菜单 -->
		<view class="function-menu">
			<view class="menu-item" v-for="(item, index) in menuItems" :key="index">
				<view class="menu-icon" :class="item.class">
					<text class="iconfont">{{item.icon}}</text>
					<view class="badge" v-if="item.badge">{{item.badge}}</view>
				</view>
				<text class="menu-text">{{item.text}}</text>
			</view>
		</view>
		
		<!-- 设置列表 -->
		<view class="settings-list">
			<view class="setting-item" v-for="(item, index) in settingItems" :key="index">
				<view class="setting-left">
					<text class="iconfont setting-icon">{{item.icon}}</text>
					<text class="setting-text">{{item.text}}</text>
				</view>
				<text class="iconfont arrow-icon">></text>
			</view>
		</view>
		
		<!-- 底部导航栏 -->
		<view class="tab-bar">
			<view class="tab-item" v-for="(tab, index) in tabs" :key="index"
				@click="handleTabClick(tab)"
				:class="{ active: tab.text === '我的' }">
				<text class="tab-icon">{{tab.icon}}</text>
				<text class="tab-text">{{tab.text}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hasNewMessage: true,
				menuItems: [
					{ icon: '🏷️', text: '我的在售', class: 'orange', badge: '4' },
					{ icon: '💰', text: '我的已售', class: 'blue', badge: '2' },
					{ icon: '⬇️', text: '我的买入', class: 'green', badge: '1' },
					{ icon: '❤️', text: '我的想要', class: 'red', badge: '4' }
				],
				settingItems: [
					{ icon: '⚙️', text: '个人信息' },
					{ icon: '📍', text: '收货地址' },
					{ icon: '🔒', text: '账户安全' },
					{ icon: '🎧', text: '客服中心' },
					{ icon: '📋', text: '平台规则' }
				],
				tabs: [
					{ icon: '🏛️', text: '主页' },
					{ icon: '📖', text: '卖书' },
					{ icon: '🛒', text: '购物车' },
					{ icon: '👤', text: '我的' }
				]
			}
		},
		methods: {
			handleTabClick(tab) {
				if (tab.text === '主页') {
					uni.switchTab({
						url: '/pages/home/home'
					});
				} else if (tab.text === '卖书') {
					uni.switchTab({
						url: '/pages/sell/sell'
					});
				} else if (tab.text === '购物车') {
					uni.switchTab({
						url: '/pages/cart/cart'
					});
				}
			}
		}
	}
</script>

<style>
	.my-container {
		min-height: 100vh;
		background-color: #F5F5F5;
		padding-bottom: 120rpx;
	}
	
	.header {
		background-color: #FF6B00;
		height: 180rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
		padding-top: 40rpx;
		border-radius: 0 0 40rpx 40rpx;
	}
	
	.title {
		color: #FFFFFF;
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.message-icon {
		position: relative;
		font-size: 40rpx;
		color: #FFFFFF;
	}
	
	.badge {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		background-color: #FF0000;
		color: #FFFFFF;
		font-size: 20rpx;
		min-width: 32rpx;
		height: 32rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 6rpx;
	}
	
	.user-info {
		margin: -60rpx 40rpx 0;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}
	
	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		margin-right: 30rpx;
		background-color: #FF6B00;
	}
	
	.user-detail {
		flex: 1;
	}
	
	.username {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 10rpx;
	}
	
	.user-tag {
		display: inline-flex;
		align-items: center;
		background-color: #FFF6F0;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
		margin-bottom: 10rpx;
	}
	
	.tag-text {
		font-size: 24rpx;
		color: #FF6B00;
	}
	
	.verify-icon {
		color: #FF6B00;
		font-size: 24rpx;
		margin-left: 4rpx;
	}
	
	.user-motto {
		font-size: 26rpx;
		color: #999999;
	}
	
	.function-menu {
		margin: 30rpx 40rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}
	
	.menu-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.menu-icon {
		position: relative;
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10rpx;
		font-size: 40rpx;
	}
	
	.menu-icon.orange { background-color: #FFF6F0; color: #FF6B00; }
	.menu-icon.blue { background-color: #F0F6FF; color: #4A90E2; }
	.menu-icon.green { background-color: #F0FFF6; color: #4AE290; }
	.menu-icon.red { background-color: #FFF0F0; color: #E24A4A; }
	
	.menu-text {
		font-size: 24rpx;
		color: #666666;
	}
	
	.settings-list {
		margin: 30rpx 40rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
	}
	
	.setting-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 2rpx solid #F5F5F5;
	}
	
	.setting-item:last-child {
		border-bottom: none;
	}
	
	.setting-left {
		display: flex;
		align-items: center;
	}
	
	.setting-icon {
		font-size: 36rpx;
		margin-right: 20rpx;
		color: #666666;
	}
	
	.setting-text {
		font-size: 28rpx;
		color: #333333;
	}
	
	.arrow-icon {
		color: #999999;
		font-size: 24rpx;
	}
	
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1rpx solid #EEEEEE;
	}
	
	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6rpx;
	}
	
	.tab-icon {
		font-size: 40rpx;
	}
	
	.tab-text {
		font-size: 24rpx;
		color: #333333;
	}
	
	.tab-item.active .tab-text {
		color: #FF6B00;
	}
</style> 